import React from 'react';

export default class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      value: '',
      isGoing: true,
      numberOfGuests: 5
    };
  }
  
  handleChange = (e) => {
    this.setState({
      value: e.target.value
    })
  }

  handleSubmit = (e) => {
    alert('提交的名字' + this.state.value);
    e.preventDefault();
  }

  handleInputChange = (e) => {
    const _tar = e.target;
    const value = 
      _tar.name === 'isGoing' ?
      _tar.checked :
      _tar.value;
    const name = _tar.name;

    this.setState({
      [name]: value
    })
  }

  render() {
    return (
      <div>
        <form onSubmit={ this.handleSubmit }>
          <label>
            名字：
            <input
              type="text"
              value={ this.state.value }
              onChange={ this.handleChange }
            />
          </label>
          <input type="submit"value='提交' />
        </form>

        <br />

        <form>
        <label>
          参与:
          <input
            name="isGoing"
            type="checkbox"
            checked={ this.state.isGoing }
            onChange={ this.handleInputChange } />
        </label>
        <br />
        <label>
          来宾人数:
          <input
            name="numberOfGuests"
            type="number"
            value={ this.state.numberOfGuests }
            onChange={ this.handleInputChange } />
        </label>
        </form>
      </div>
    )
  }
}